<template>
	<div>

		<mu-appbar class="my-cart-header" text-color="black" color="white" z-depth="2" style="width: 100%;">
			<mu-button :ripple="false" icon slot="left">
				<mu-icon value="shopping_cart"/>
			</mu-button>
			购物车
			<mu-button @click="edit" flat slot="right">{{hint}}</mu-button>
		</mu-appbar>

		<my-card-slider gradual class="my-card-slider"/>
		<mu-sub-header class="my-sub-header">
			<vs-checkbox color="danger" style="display: none"/>
			<div>我的购物车</div>
		</mu-sub-header>
		<mu-list class="my-cart-items" textline="three-line">
			<div v-for="(item,index) in this.goods" :key="index">
				<vs-divider v-if="item.type===0" position="left" :color="item.color">{{item.name}}</vs-divider>
				<my-product-item v-if="item.type===1"/>
			</div>
		</mu-list>
		<my-button-bar is-pay :is-cancel="false" :pay="pay" pai-hint="提交订单"/>
		<mu-drawer :width="drawerWidth" :open.sync="drawerOpen" :docked="docked" :right="position === 'right'">
			<!--tab页面header-->
			<mu-appbar z-depth="1" style="width: 100%;" color="white" text-color="black">
				<mu-button icon slot="left" @click="drawerOpen=!drawerOpen">
					<mu-icon value="keyboard_arrow_left"></mu-icon>
				</mu-button>
				订单详情
				<mu-button @click="openBotttomSheet" :round="true" flat slot="right">
					<mu-icon value="more_horiz"></mu-icon>
				</mu-button>
			</mu-appbar>
			<div class="my-order-pay-top">
				<div class="my-order-pay-text">
					<div class="my-text-left">
						<mu-button style="font-size:18px;color:white;" :ripple="false" flat>
							<mu-icon left value="access_time"></mu-icon>
							等待付款
						</mu-button>
					</div>
					<div class="my-text-right">剩余: 23小时59分钟</div>
				</div>
				<div class="my-total-price">需付款: ￥375</div>
			</div>
			<div class="my-address">
				<div class="my-order-pay-text">
					<div class="my-text-left">
						<mu-button id="my-mu-btn" style="padding:0;font-size:18px;" :ripple="false" flat>
							<mu-icon left value="person_pin_circle"/>
							钢铁侠
						</mu-button>
					</div>
					<div class="my-text-right">18865503001</div>
				</div>
				<div class="my-order-id" style="text-align:left">MYNC20182021</div>
				<div class="my-address-text">地址:山东省千库市**区九曲林街道金九路与香港路交汇西400米千库公寓</div>
			</div>
			<my-order-item/>
			<div class="my-flex-row">
				<div class="my-row-item">
					<div>订单编号</div>
					<div>8744989212</div>
				</div>
				<div class="my-row-item">
					<div>下单时间</div>
					<div>2020年7月20日 11:51:23</div>
				</div>
			</div>
			<div class="my-flex">
				<div>配送方式</div>
				<div>中国邮政</div>
			</div>
			<div class="my-flex">
				<div>总支付金额</div>
				<div>5520.00</div>
			</div>
			<my-c-divider borderd title="为你推荐" hint="查看更多"/>
			<my-recom-slider/>
			<my-footer/>
			<my-button-bar is-cancel is-pay pai-hint="确认支付" cancel-hint="放弃支付" id="my-drawer-btn" :pay="confirmPay" :cancel="confirmCancel"/>

			<mu-bottom-sheet overlay-color="#49A28C" :open.sync="seetOpen">
				<mu-list @item-click="closeBottomSheet">
					<mu-sub-header>
						<mu-button :ripple="false" flat color="primary">
							<mu-icon left value="payments"></mu-icon>
							选择支付方式
						</mu-button>
					</mu-sub-header>

					<mu-list-item button @click="payDone">
						<mu-list-item-action>
							<mu-icon value="grade" color="orange"></mu-icon>
						</mu-list-item-action>
						<mu-list-item-title>支付宝</mu-list-item-title>
					</mu-list-item>

					<mu-list-item button @click="payDone">
						<mu-list-item-action>
							<mu-icon value="forum" color="blue"></mu-icon>
						</mu-list-item-action>
						<mu-list-item-title>微信支付</mu-list-item-title>
					</mu-list-item>

					<mu-list-item button @click="payDone">
						<mu-list-item-action>
							<mu-icon value="credit_card" color="green"></mu-icon>
						</mu-list-item-action>
						<mu-list-item-title>免密银行卡支付</mu-list-item-title>
					</mu-list-item>

					<mu-list-item button @click="payDone">
						<mu-list-item-action>
							<mu-icon value="tag_faces" color="cyan"></mu-icon>
						</mu-list-item-action>
						<mu-list-item-title>刷脸支付</mu-list-item-title>
					</mu-list-item>

				</mu-list>
			</mu-bottom-sheet>

		</mu-drawer>
		<my-footer/>
	</div>
</template>

<script>
import MyCDivider from "@/pages/components/public/MyCDivider";
import MyCardSlider from "@/pages/components/public/MyCardSlider";
import MyProductItem from "@/pages/components/public/MyProductItem";
import MyButtonBar from "@/pages/components/public/MyButtonBar";
import MyOrderItem from "@/pages/components/public/MyOrderItem";
import MyRecomSlider from "@/pages/components/public/MyRecomSlider";
import MyFooter from "@/pages/components/public/MyFooter";
export default {
	name: "Cart",
	components: {MyFooter,MyCDivider, MyRecomSlider, MyCardSlider, MyProductItem, MyButtonBar, MyOrderItem},
	data() {
		return {
			goods: [
				{type: 0, name: '奥里给旗舰店', color: '#49A28C'},
				{type: 1},
				{type: 1},
				{type: 1},
				{type: 0, name: '天猫旗舰店', color: 'danger'},
				{type: 1},
				{type: 1},
				{type: 0, name: '耐克旗舰店', color: 'primary'},
				{type: 1}
			],
			hint: '编辑',
			docked: false,
			drawerOpen: false,
			position: 'left',
			drawerWidth: '100%',
			seetOpen: false
		}
	},
	methods: {
		openLoading() {
			this.$vs.loading({
				color: '#49A28C',
				type: "sound"
			})
			setTimeout(() => {
				this.$vs.loading.close()
			}, 500);
		},

		payDone: function () {
			this.$vs.loading({
				color: '#49A28C',
				type: "sound"
			})
			setTimeout(() => {
				this.$vs.loading.close()
			}, 2000);
		},

		edit: function () {
			let txt = this.hint
			this.hint = txt === '编辑' ? '取消' : '编辑'
			let checks = document.getElementsByClassName('con-vs-checkbox')
			if (this.hint === '编辑') {
				for (let i = 0; i < checks.length; i++) {
					checks[i].style.display = 'none'
				}
			} else {
				for (let i = 0; i < checks.length; i++) {
					checks[i].style.display = 'flex'
				}
			}
		},
		pay: function () {
			this.drawerOpen = !this.drawerOpen
		},
		cancel: function () {
			console.log('取消')
		},
		closeBottomSheet() {
			this.seetOpen = false;

		},
		openBotttomSheet() {
			this.seetOpen = true;
		},
		confirmCancel: function () {
			this.drawerOpen = !this.drawerOpen
		},
		confirmPay: function () {
			this.seetOpen = !this.seetOpen
		}
	},
	created() {
		this.openLoading()
	},

}
</script>

<style scoped>
	.my-cart-items {
		background-color: white;
		margin-top: 0;
		padding: 0;
	}
	.my-card-slider {
		position: sticky;
		top: 56px;
		z-index: 9;
		background-color: white;
	}
	.my-cart-header {
		position: sticky;
		top: 0;
	}
	.my-sub-header {
		padding-left: 0 !important;
		position: sticky;
		top: 135px;
		background: white;
		z-index: 2;
		margin: 0;
		box-shadow: 0 4px 9px #EFEFEF;
	}
	.my-sub-header {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.my-sub-header div,
	.my-sub-header .con-vs-checkbox {
		display: inline-block;
		margin-left: 16px;
	}
	/* Top */
	.my-order-pay-top {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: white;
		background-image: linear-gradient(75deg, #87DECE, #57AA96);
	}
	.my-order-pay-text {
		display: flex;
		width: 100%;
		padding: 20px 20px 0 15px;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		font-size: 15px;
	}
	.my-text-right, .my-text-left {
		display: inline-block;
	}
	.my-total-price {
		text-align: right;
		padding: 0 30px 50px 0;
		font-size: 12px;
		width: 100%;
	}
	/* Addr */
	.my-address {
		margin: -40px 20px 10px 20px;
		border-radius: 15px;
		background-color: white;
		box-shadow: 0 4px 9px #BFBFBF;
	}
	.my-order-id {
		width: 100%;
		font-size: 12px;
		text-align: left;
		padding-left: 40px;
	}
	.my-address-text {
		text-align: left;
		padding: 5px 20px;
	}
	.mu-drawer {
		background-color: #F5F5F5;
	}
	#my-ctn {
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		height: auto;
		background: white;
	}
	.my-flex {
		display: flex;
		margin-top: 10px;
		flex-direction: row;
		background-color: white;
		padding: 20px;
		width: 100%;
		justify-content: space-between;
	}
	.my-flex-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15px;
		padding: 10px 20px;
		width: 100%;
		background: white;
	}
	.my-row-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: white;
		width: 100%;
		margin: 5px 0;
	}
	.mu-appbar {
		position: sticky;
		top: 0;
		z-index: 15;
	}
	#my-drawer-btn {
		background-color: white;
		position: sticky;
		bottom: 0;
		margin-top: 10px;
		margin-bottom: 0;
		box-shadow: 0 -3px 9px #F1F1F1;
		border-top: 2px solid #EFEFEF;
	}
	#my-drawer-btn > button {
		border-radius: 0;
		padding: 0;
	}
	#my-drawer-btn > button.my-btn {
		height: 100% !important;
		margin: 0;
	}

</style>